<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    body,
    ul,
    dl,
    dd {
      margin: 0px;
      padding: 0px;
    }

    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }

    .play_wrap {
      width: 800px;
      height: 544px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -272px;
      /* background-color: #f9f9f9; */
    }

    .search_bar {
      height: 60px;
      background-color: #1eacda;
      overflow: hidden;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 11;
    }

    .search_bar img {
      margin-left: 23px;
    }

    .search_bar input {
      margin-right: 23px;
      width: 296px;
      height: 34px;
      border-radius: 17px;
      border: 0px;
      background: url('images/zoom.png') 265px center no-repeat rgba(255, 255, 255, 0.45);
      text-indent: 15px;
      outline: none;
    }

    .center_con {
      height: 435px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
    }

    .song_wrapper {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') right center no-repeat;
      position: relative;
      overflow: auto;
    }

    .song_list li {
      font-size: 12px;
      color: #333;
      line-height: 36px;
      width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .song_list .active {
      color: #da651e;
    }

    .player_con {
      width: 400px;
      height: 435px;
      position: relative;
    }

    .disc {
      position: absolute;
      left: 73px;
      top: 60px;
      z-index: 9;
    }

    .cover {
      position: absolute;
      left: 125px;
      top: 112px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      z-index: 8;
    }

    .comment_list {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') left center no-repeat;
      overflow: auto;
      position: relative;
    }

    .comment_list dl {
      padding-left: 55px;
      position: relative;
      margin-bottom: 20px;
    }

    .comment_list dt {
      position: absolute;
      left: 4px;
      top: 0px;
    }

    .comment_list dt img {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }

    .comment_list dd {
      font-size: 12px;
    }

    .comment_list .name {
      font-weight: bold;
      color: #333;
      margin-top: 5px;
    }

    .comment_list .detail {
      color: #666;
      margin-top: 5px;
      line-height: 18px;
    }

    .audio_con {
      height: 50px;
      background-color: #f1f3f4;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .myaudio {
      width: 800px;
      height: 40px;
      margin-top: 5px;
      outline: none;
      background-color: #f1f3f4;
    }

    /* 旋转的动画 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(360deg);
      }
    }

    /* 旋转的类名 */
    .autoRotate {
      animation-name: Rotate;
      animation-iteration-count: infinite;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-duration: 5s;
    }

    /* 是否正在播放 */
    .playing {
      animation-play-state: running;
    }

    .play_bar {
      position: absolute;
      left: 200px;
      top: -10px;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: 12px 12px;
      transition: 1s;
    }

    /* 播放杆 转回去 */
    .play_bar.playing {
      transform: rotate(0);
    }

    .btn {
      position: absolute;
      right: 35px;
      top: 15px;
      width: 30px;
      height: 30px;
      background-color: transparent;
      border: none;
      outline: none;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="./images/player_title.png" alt="" />
        <input type="text" class="txt" />
        <button class="btn"></button>
      </div>
      <div class="center_con">
        <div class="song_wrapper">
          <ul class="song_list">
            <li>
              岁月神偷--周笔畅
            </li>
            <li>
              岁月神偷--金玟岐
            </li>
            <li>
              岁月神偷--汪苏泷
            </li>
            <li>
              岁月神偷--不才
            </li>
            <li>
              岁月神偷（磁性男声版）（Cover：金玟岐）--于大海（于黑蛋）
            </li>
          </ul>
        </div>
        <div class="player_con">
          <img src="./images/player_bar.png" class="play_bar " />
          <!-- 黑胶碟片 -->
          <img src="./images/disc.png" class="disc autoRotate" />
          <img src="./images/cover.png" class="cover autoRotate" />
        </div>
        <div class="comment_list">
          <div>
            <dl>
              <dt>
                <img src="https://p3.music.126.net/2cwPUmMgb6XImVwNy-FcIw==/109951163863553426.jpg" alt="" />
              </dt>
              <dd class="name">Teoeo_</dd>
              <dd class="detail">
                你没听出来汪老师一直在配合刘乐瑶唱吗，他大部分时间在给刘乐瑶和音，而且唱的是女生的key，因为是孩子们的节目，他想让孩子更多的展现自己的优点，所以汪老师尽量地配合刘乐瑶的声音唱，如果是汪苏泷一个人唱，他不会这样唱的。
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="audio_con">
        <audio controls autoplay loop class="myaudio"></audio>
      </div>
    </div>
  </div>
  <!-- 引入jQuery文件 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 引入template文件 -->
  <script src="./lib/template-web.js"></script>
  <!-- 创建模板 -->
  <!-- 歌单模板 -->
  <script id="liTemp" type="text/html">
    {{each result.songs v}}
    <li data-id="{{v.id}}">{{v.name}}</li>
    {{/each}}
  </script>
  <!-- 评论模板 -->
  <script id="hotTemp" type="text/html">
    {{each hotComments v}}
      <div>
        <dl>
          <dt>
            <img src="{{v.user.avatarUrl}}"  />
          </dt>
          <dd class="name">{{v.user.nickname}}</dd>
          <dd class="detail"> {{v.content}} </dd>
        </dl>
      </div>
    {{/each}}
  </script>
 
  <script type='text/javascript'>
  // 入口函数
      $(function () {
        // 歌曲双击播放

        $('.song_list').on('dblclick', 'li', function () {
          let id = $(this).attr('data-id');
          $.ajax({
            url: 'https://autumnfish.cn/song/url',
            data: {
              id,
            },
            success: function (backData) {
              if (backData.code == 200) {
                $('.myaudio').attr('src', backData.data[0].url);
              }
              $.ajax({
                url: "https://autumnfish.cn/comment/music",
                data: {
                  id
                },
                success: function (backData) {
                  console.log(backData);
                  if(backData.code==200){
                    let hotHtml = template('hotTemp',backData);
                    $('.comment_list').html(hotHtml);
                  }
                }
              })

            }
          })
        })
        // 搜索事件
        $('.btn').on('click', function (e) {

          e.preventDefault();
          let txt = $('.txt').val().trim();
          if (txt == '') {
            alert('请输入你要搜索的歌名')
            return;
          }
          $.ajax({
            url: 'https://autumnfish.cn/search',
            data: {
              keywords: txt,
            },
            success: function (backData) {
              if (backData.code == 200) {
                let liHtml = template('liTemp', backData);
                $('.song_list').html(liHtml);
              }
            }
          })
        })

        // 空格触发搜索事件
        $('.txt').on('keydown', function (e) {
          if (e.keyCode == 13) {
            $('.btn').trigger('click');
          }
        })

        // 播放音乐开始旋转
        // 暂停
        $('.myaudio').on('pause', function () {
          if (this.paused) {
            $('.play_bar').removeClass('playing');
            $('.autoRotate').removeClass('playing');

          };
        })
        // 播放
        $('.myaudio').on('playing', function () {
          if (!this.paused) {
            $('.play_bar').addClass('playing');
            $('.autoRotate').addClass('playing');

          };
        })

      })
  </script>

</body>

</html>